<div class="app-container with-navbar with-tabbar" ng-controller="PigInfoController">
    <div class="navbar fixed-top">
        <div class="navbar-left hide-weixin" ng-click="goBack()">
            <img class="button-icon" src="image/nav-left.png"/>
            <!-- div class="button-text">返回</div -->
        </div>
        <div class="navbar-title">
            {{product.name}}
        </div>
    </div>
    <div class="app-content">
        <!-- Photo -->
        <div class="product-flash swiper-container" ng-if="isLoaded && product">
            <div class="swiper-wrapper">
                <div class="flash-slide swiper-slide" >
                    <img class="slide-image" ng-src="{{product.cover_img}}"/>
                </div>
                <div class="flash-slide swiper-slide" ng-if="!product.cover_img">
                    <img class="slide-image" ng-src="image/default-photo.png"/>
                </div>
            </div>
        </div>
        <!-- Info -->
        <div class="product-info" ng-if="isLoaded && product">
            <div class="info-name">
                <span style="font-size: 20px; color: #000;">{{product.name}}</span>
            </div>
        </div>
        <div class="product-intro" ng-if="isLoaded && product">
            <div class="intro-header">
                土猪简介
            </div>
            <div class="intro-content" style="padding: 20px;">
                <p style="font-size: 14px;line-height: 24px;">编号：{{product.pig_code}}</p>
                <p style="font-size: 14px;line-height: 24px;">耳标：{{product.ear_mark}}</p>
                <p style="font-size: 14px;line-height: 24px;">进栏时间：{{product.enter_date}}</p>
                <p style="font-size: 14px;line-height: 24px;">进栏重量：{{product.enter_weight}}kg</p>
                <p style="font-size: 14px;line-height: 24px;">预防时间：{{product.inject_date}}</p>
            </div>
        </div>

        <div class="product-intro" ng-if="isLoaded && product.pig_farm">
            <div class="intro-header">
                养殖地介绍
            </div>
            <div class="intro-content" style="padding: 20px;">
                <img class="slide-image" ng-src="{{product.pig_farm.cover_img}}"/>
                <p style="font-size: 14px;line-height: 24px;">名称：{{product.pig_farm.name}}</p>
                <p style="font-size: 14px;line-height: 24px;">电话：{{product.pig_farm.phone}}</p>
                <p style="font-size: 14px;line-height: 24px;">邮箱：{{product.pig_farm.email}}</p>
                <p style="font-size: 14px;line-height: 24px;">地址：{{product.pig_farm.province+product.pig_farm.city+product.pig_farm.district+product.pig_farm.full_address}}</p>
                <p style="font-size: 14px;line-height: 24px;">简介：{{product.pig_farm.abstract}}</p>
            </div>
        </div>

        <div class="product-intro" ng-if="isLoaded && product.pig_quarantine && quarantine">
            <div class="intro-header">
                检验检疫
            </div>
            <div class="" style="padding: 20px;">
                <p style="font-size: 14px;line-height: 24px;">单号：{{product.pig_quarantine.quarantine_sn}}</p>
                <p style="font-size: 14px;line-height: 24px;">货主：{{quarantine.name}}</p>
                <p style="font-size: 14px;line-height: 24px;">启运地点：{{quarantine.from_add}}</p>
                <p style="font-size: 14px;line-height: 24px;">到达地点：{{quarantine.to_add}}</p>
                <p style="font-size: 14px;line-height: 24px;">承运人：{{quarantine.haulier}}</p>
                <p style="font-size: 14px;line-height: 24px;">开证方式：{{quarantine.open_type}}</p>
                <p style="font-size: 14px;line-height: 24px;">开证状态：{{quarantine.open_status}}</p>
                <p style="font-size: 14px;line-height: 24px;">签发时间：{{quarantine.time}}</p>
                <p style="font-size: 14px;line-height: 24px;">照片凭证：</p>
                <div><img style="margin-right: 5px;" ng-repeat="img in product.pig_quarantine.imgs.split('|') track by $index" ng-src="{{img+'?x-oss-process=image/resize,h_100'}}"></div>
            </div>
        </div>

        <div class="product-intro" ng-if="isLoaded && product.pm_arr.length>0">
            <div class="intro-header">
                空气质量(每小时更新)
            </div>
            <div class="intro-content" style="padding: 10px;overflow-x: scroll;">
                <style>
                    .pm-arr{border-collapse: collapse;margin: 0 auto;text-align: center;width:540px;}
                    .pm-arr th,.pm-arr td {font-size: 14px;text-align: center;border: 1px solid #cad9ea;height: 20px;}
                </style>
                <table class="pm-arr">
                    <thead><th width="60">发布时间</th><th width="45">PM2.5</th><th width="40">PM10</th><th width="30">值</th><th width="70">等级</th><th width="200">评价</th></thead>
                    <tbody>
                        <tr ng-repeat="pm in product.pm_arr">
                            <td>{{pm.update}}</td>
                            <td>{{pm.pm2_5}}</td>
                            <td>{{pm.pm10}}</td>
                            <td>{{pm.val}}</td>
                            <td>{{pm.lev}}</td>
                            <td>{{pm.impx}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
